
<template>
  <ul class="check-tree">
    <li v-for="(item,index) in treeList" :key="index">
      <p><el-checkbox v-model="item.checked" @change="checkAll(item)">{{item.label}}</el-checkbox></p>
      <tree-menus :treeList="item.children"></tree-menus>
    </li>
  </ul>
</template>
<script>
export default{
  name: 'treeMenus',
  props: {
    treeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      fData: [],
      nowCheck: {},
      bool: false,
      allcheck: true
    }
  },
  methods: {
    resetAll(data) {
      data.forEach(item => {
        item.checked = false
        if (item.children) {
          this.resetChild(item.children)
        }
      })
    },
    findFList(list) {
      if (list.$parent.treeList) {
        this.findFList(list.$parent)
      } else {
        this.fData = list.treeList
      }
    },
    resetParent(list) {
      list.treeList.forEach(item => {
        if (item.id === this.nowCheck.parentId && item.children.some(i => i.id === this.nowCheck.id)) {
          item.checked = false
          this.setNow(item)
        }
      })
      if (list.$parent.treeList) {
        this.resetParent(list.$parent, this.nowCheck.parentId)
      }
    },
    resetChild(val) {
      val.forEach(item => {
        item.checked = false
        if (item.children) {
          this.resetChild(item.children)
        }
      })
    },
    setNow(data) {
      this.nowCheck = JSON.parse(JSON.stringify(data))
    },
    setfirst(ptreeData) {
      ptreeData.forEach(i => {
        this.valiChecked(i)
        this.bool ? null : i.checked = true
      })
    },
    setSibling(ptreeData, parentId) {
      let data = ptreeData.find(i => i.id === parentId)
      data.children.forEach(i => {
        this.valiChecked(i)
        this.bool ? null : i.checked = true
      })
    },
    checkAll(val) {
      this.allcheck = true
      this.setNow(val)
      this.$parent.treeList ? this.resetParent(this, val.parentId) : null
      this.resetChild([val])
      this.$parent.treeList ? this.setSibling(this.$parent.treeList, val.parentId) : this.setfirst(this.treeList)
    },
    valiChecked(data) {
      if (data.children.length > 0) {
        this.bool = data.checked
        if (this.bool) return
        data.children.forEach(i => {
          this.valiChecked(i)
        })
      } else {
        this.bool = data.checked
      }
    },
    async valiAll(data) {
      await this.checks(data)
    },
    checks(data) {
      for (let index = 0; index < data.length; index++) {
        if (!this.allcheck) return
        const elment = data[index]
        if (elment.checked) {
          this.allcheck = true
          continue
        }
        if (!elment.checked && elment.children.length < 1) {
          this.allcheck = false
          break
        }
        if (!elment.checked && elment.children.length > 0) {
          this.checks(elment.children)
        }
      }
    }
  },
  mounted() {
  }
}
</script>